<template>
  <div class="music page page_padding">
    <h1 class="tips">音乐</h1>
    <div class="container">
      <transition-group name="slide-fade">
        <router-link v-for="music in musics" :to="`/music/${music?.mid}`" :key="music?.mid">
          <div class="music_item">
            <p>{{ music?.file?.fname }}</p>
            <small>{{ music?.file?.fuploadTime }}</small>
          </div>
        </router-link>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import { apis } from "../api";

export default {
  beforeRouteEnter(to, from, next) {
    apis.checkLogin(next, {
      title: "尚未登录，请登录",
      icon: to.meta.icon,
      showDuration: 5000,
    })
  },
  setup() {
    const data = reactive({
      musics: []
    })

    const getAllMusic = () => {
      apis.getAllMusic().then(response => {
        response.data.result.forEach(musics => {
          data.musics.push(musics)
        });
      })
    }

    getAllMusic()
    return { ...toRefs(data), getAllMusic }
  }
}
</script>

<style scoped lang="less">
.music {
  min-height: 100vh;
  background-color: #7b65dd;
}

.container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;

  & .music_item {
    padding: 16px;
    line-height: 26px;
    background-color: rgba(255, 255, 255, 0.1);

    & small {
      width: 100%;
      display: block;
      text-align: right;
    }
  }
}
</style>